<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery响应式线条滑出列表特效 - xw素材网</title>
<script src="js/jquery.min.js"></script>
</head>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
.box {
	width: 1190px; margin: 0 auto;
	padding-top: 50px; height: 300px;
}
.border_animation {
	border: 1px solid #eee;
	width: 220px; height: 260px;
	float: left; margin-right: 10px;
	position: relative;
}
.border_animation .border_top {
	position: absolute;top: 0; left: 0;
	background: #666666;
	height: 1px;width: 0;
	transition: all 0.5s ease-out;
}
.border_animation .border_right {
	position: absolute;bottom: 0;right: 0;
	height: 0;width: 1px;
	background: #666666;
	transition: all 0.5s ease-out;
}
.border_animation .border_bottom {
	position: absolute; right: 0;bottom: 0;
	 background: #666666;
	height: 1px; width: 0;
	transition: all 0.5s ease-out;
}
.border_animation .border_left {
	position: absolute;left: 0; top: 0;
	 background: #666666;
	height: 0; width: 1px;
	transition: all 0.5s ease-out;
}
.eva-switchable-panels img {
	display: block;
}
.box .hover .border_top,.box .hover .border_bottom {
	width: 220px
}
.box .hover .border_left,.box .hover .border_right {
	height: 260px
}
	/*----------------------鼠标触摸显示进度条--------------------*/
	.border_animation_1{
		position:relative;
		transition: all 0.5s ease-out;
		float: left;margin-left: 10px;
		border: 1px solid #eee;
	}
    .border_animation_1 span{
		display:block; position:absolute;
		width:0; height:0; background:#1FAEFF;
		top:260px; left:0;
    }
</style>
<body>
<div class="box">
	<div class="border_animation">
	        <div class="border_top"></div>
	        <div class="border_right"></div>
	        <div class="border_bottom"></div>
	        <div class="border_left"></div>
	        <div>
	            <a target="_blank" href="#">
	                <img width="220" height="260" alt="" src="images/123.jpg">
	            </a>
	        </div>
	</div>
	<div class="border_animation_1">
		<a target="_blank" href="#">
			<img width="220" height="260" alt="" src="images/123.jpg">
		</a>
		<span></span>
	</div>
	<div class="border_animation_1">
		<a target="_blank" href="#">
			<img width="220" height="260" alt="" src="images/123.jpg">
		</a>
		<span></span>
	</div>
	<div class="border_animation_1">
		<a target="_blank" href="#">
			<img width="220" height="260" alt="" src="images/123.jpg">
		</a>
		<span></span>
	</div>
</div>
<script>
	$(function(){
        $(".border_animation").mouseenter(function(){
        	$(this).addClass("hover");
        });
        $(".border_animation").mouseleave(function(){
            $(this).removeClass("hover");
        });
        /*=----------------进度条--------------------*/
        $('.border_animation_1').hover(function () {
            $('span', this).css('height', '3px');
            $('span', this).animate({
                left: '0',
                width: '100%',
                right: '0'
            }, 300);
        },function () {
            $('span', this).animate({
                left:'0%',
                width:'0'
            }, 300);
        })
    });
</script>
<p>来源：<a href="http://www.xwcms.net/" target="_blank">xw素材网</a></p>

</body>
</html>
